<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="closeModal()" id="close-modal">
        Close
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <h1>Value</h1>
  <h2>{{value}}</h2>
  <h3>{{prop}}</h3>
  <p>modal is defined: <span id="modalInstance">{{ !!modal }}</span></p>
  <p>ngOnInit: <span id="ngOnInit">{{onInit}}</span></p>
  <p>ionViewWillEnter: <span id="ionViewWillEnter">{{willEnter}}</span></p>
  <p>ionViewDidEnter: <span id="ionViewDidEnter">{{didEnter}}</span></p>
  <p>ionViewWillLeave: <span id="ionViewWillLeave">{{willLeave}}</span></p>
  <p>ionViewDidLeave: <span id="ionViewDidLeave">{{didLeave}}</span></p>
  <p *ngIf="!!nav">
    <ion-button (click)="push()" class="push-page">Push page</ion-button>
    <ion-button (click)="pop()" class="pop-page">Pop page</ion-button>
  </p>

  <form [formGroup]="form">
    <ion-item id="inputWithFloatingLabel">
      <ion-select label-placement="floating" multiple="false" formControlName="select">
        <ion-label slot="label" color="Primary">Floating Label</ion-label>
        <ion-select-option [value]="0">Option 0</ion-select-option>
        <ion-select-option [value]="1">Option 1</ion-select-option>
      </ion-select>
    </ion-item>

    <ion-button id="set-to-null" (click)="setSelect(null)">Set select value to "null"></ion-button>
    <ion-button id="set-to-undefined" (click)="setSelect(undefined)">Set select value to "undefined"></ion-button>
  </form>
</ion-content>
